.footer {
  position: relative;
  overflow: hidden;

  &-img-one,
  &-img-two {
    position: absolute;
    transition: 0.3s;
  }

  &-img-one {
    width: 100px;
    top: 6rem;
    right: -2rem;

    &:hover {
      transform: translateY(-0.5rem);
    }
  }

  &-img-two {
    width: 150px;
    bottom: 4rem;
    right: 4rem;

    &:hover {
      transform: translateY(-0.5rem);
    }
  }

  &-container {
    row-gap: 2rem;
  }

  &-logo {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    margin-bottom: var(--mb-1);
    font-weight: var(--font-medium);
    color: var(--title-color);

    &-img {
      width: 20px;
    }
  }

  &-description {
    margin-bottom: var(--mb-2-5);
  }

  &-social {
    display: flex;
    column-gap: 0.75rem;

    &-link {
      display: inline-flex;
      background: var(--container-color);
      padding: 0.25rem;
      border-radius: 0.25rem;
      color: var(--title-color);
      font-size: 1rem;

      &:hover {
        background: var(--body-color);
      }
    }
  }

  &-title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1);
  }

  &-link {
    font-size: var(--small-font-size);
    color: var(--text-color);
    transition: 0.3s;

    &:hover {
      color: var(--title-color);
    }
  }

  &-copy {
    display: block;
    text-align: center;
    font-size: var(--smaller-font-size);
    margin-top: 4.5rem;
  }
}
